<template>
  <div class="page-footer">
    <div class="page-body">
      <div class="footer-info">
        <div class="first-row">
          <div class="footer-logo">
            <img src="../assets/foot-logo.png" alt="" />
          </div>
          <div class="footer-about">
            <div class="footer-more">
              <a href="">关于我们</a>
              <span class="footer-line">|</span>
              <a href="">加入我们</a>
              <span>|</span>
              <a href="">合作申请</a>
              <span>|</span>
              <a href="">意见反馈</a>
              <span>|</span>
              <a href="">用户协议</a>
            </div>
            <div class="footer-sec-copyright">
              <a href="" class="font-light fs-xs">浙ICP备13006852号</a>
              <a href="" class="font-light fs-xs">浙B2-20160872</a>
            </div>
            <div class="footer-main-copyright">
              <a href="">
                <img src="../assets/filing.png" class="filing" alt="" />
                <span class="font-light">浙公网安备 33010802003863号</span>
              </a>
            </div>
          </div>
        </div>
        <div class="follow">
          <span class="font-white">关注我们：
            <i class="iconfont icon-weibo"></i>
            <i class="iconfont icon-weixin"></i>
            <div class="show-erweima">
              <img src="../assets/weichat.png" alt="" />
            </div>
            <i class="iconfont icon-qq"></i>
            <i class="iconfont icon-douban"></i>
          </span>
        </div>
      </div>
      <div class="footer-link">
        <div class="frendly-link">
          <span class="frendly-font">友情链接：</span>
          <a href="">EduSoho开源网络课堂</a>
          <span class="footer-line">|</span>
          <a href="">气球鱼学院</a>
          <span class="footer-line">|</span>
          <a href="">360安全网址导航</a>
          <span class="footer-line">|</span>
          <a href="">hao123</a>
          <span class="footer-line">|</span>
          <a href="">绿色网</a>
          <span class="footer-line">|</span>
          <a href="">站长之家</a>
          <span class="footer-line">|</span>
          <a href="">新客网</a>
          <span class="footer-line">|</span>
          <a href="">暖石网</a>
          <span class="footer-line">|</span>
          <a href="">麦子学院</a>
          <span class="footer-line">|</span>
          <a href="">博为峰网校</a>
        </div>
        <div class="power-by">
          <span class="font-light fs-xs">Powered by
            <a href="" class="font-light fs-xs">EduSoho v7.5.15</a>
            ©2014-2020</span>
          <a class="font-light fs-xs howzhi-font" href="">好知网</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup () { }
}
</script>

<style lang="scss" scoped>
.page-footer {
  background-color: #515151;
  box-sizing: border-box;
  border-top: 1px solid #515151;
  .page-body {
    .footer-info {
      margin: 35px 0;
      display: flex;
      flex-direction: column;
      @media (max-width: 992px) {
        align-items: center;
      }
      .first-row {
        display: flex;
        margin-bottom: 50px;
        justify-content: flex-start;
        @media (max-width: 992px) {
          flex-direction: column;
          align-items: center;
        }
        .footer-logo {
          padding: 0 10px;
          margin-right: 100px;
          @media (max-width: 992px) {
            margin-right: 0px;
          }
        }
        .footer-about {
          padding: 8px 0 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .footer-more {
            text-align: center;
            a,
            span {
              color: #fff;
            }
            a {
              padding: 0 6px;
            }
          }
          .footer-sec-copyright {
            a:first-child {
              padding: 0 10px 0 0;
            }
            a:last-child {
              padding: 0 0 0 10px;
            }
          }
          .footer-main-copyright {
            margin-top: 8px;
            img {
              width: 20px;
              height: 20px;
              position: relative;
              bottom: 1px;
            }
          }
        }
      }
      .follow {
        margin-left: 15px;
        position: relative;
        .iconfont {
          display: inline-block;
          width: 28px;
          height: 28px;
          border: 1px solid #fff;
          border-radius: 50%;
          line-height: 28px;
          text-align: center;
          margin: 5px;
          &:first-child:hover {
            background-color: #ff842e;
          }
          &:nth-child(2):hover {
            background-color: #15c288;
          }
          &:nth-child(2):hover + .show-erweima {
            display: block;
          }
          &:nth-child(4):hover {
            background-color: #1f98d9;
          }
          &:last-child:hover {
            background-color: #15c288;
          }
        }
        .show-erweima {
          position: absolute;
          top: -211px;
          left: 34px;
          display: none;
          transition: all 1s ease;
          &:hover {
            display: block;
          }
        }
      }
    }
    .footer-link {
      border-top: 1px solid #5f5f5f;
      padding: 15px 75px;
      .frendly-link {
        a,
        span {
          color: #999;
          font-size: 12px;
        }
        .frendly-font {
          padding-right: 10px;
        }
        .footer-line {
          padding: 0 14px;
        }
      }
    }
    .power-by {
      a:hover {
        color: #999 !important;
      }
      .howzhi-font {
        margin-left: 15px;
      }
    }
  }
}
</style>
